<template>
    <div class="main login">
        <div class="tel400"></div>
        <div class="logo"></div>
        <div class="middle_cen">
            <div class="input_con login-form">
                <Form :model="formData" label-position="left" :label-width="91" :rules="ruleValidate" ref="formValidate">
                    <FormItem label="公司ID：" class="form-item" prop="co_id">
                        <Input v-model="formData.co_id"></Input>
                    </FormItem>
                    <FormItem label="客服ID：" class="form-item" prop="l_n">
                        <Input v-model="formData.l_n"></Input>
                    </FormItem>
                    <FormItem label="密码：" class="form-item" prop="l_pw">
                        <Input v-model="formData.l_pw" type="password"></Input>
                    </FormItem>
                    <FormItem label="" class="form-item no-label mr-b10" :label-width="0">
                        <Row>
                            <Col span="8">
                                <FormItem class="text-center">
                                    <Dropdown trigger="click" @on-click="changeStatus">
                                        <DropdownMenu slot="list">
                                            <DropdownItem name="0" :selected="onlineStatus[0]">
                                                <Icon class="fl" type="happy-outline" :size="18"></Icon>在线
                                            </DropdownItem>
                                            <DropdownItem name="2" :selected="onlineStatus[2]">
                                                <Icon class="fl" type="leaf" :size="18"></Icon>离开
                                            </DropdownItem>
                                            <DropdownItem name="3" :selected="onlineStatus[3]">
                                                <Icon class="fl" type="ios-minus" :size="18"></Icon>忙碌
                                            </DropdownItem>
                                            <DropdownItem name="1" :selected="onlineStatus[1]">
                                                <Icon class="fl" type="cube" :size="18"></Icon>隐身
                                            </DropdownItem>
                                        </DropdownMenu>
                                        <a href="javascript:void(0)" class="drop-btn">
                                            <Icon :type="onlineStatusIcon[onlineStatusIndex]" :size="18"></Icon>
                                            <Icon type="arrow-down-b"></Icon>
                                        </a>
                                    </Dropdown>
                                </FormItem>
                            </Col>
                            <Col span="14"  offset="2">
                                <FormItem>
                                    <CheckboxGroup v-model="formItem.checkbox">
                                        <Checkbox label="保存密码"></Checkbox>
                                        <Checkbox label="自动登录"></Checkbox>
                                    </CheckboxGroup>
                                </FormItem>
                            </Col>
                        </Row>
                    </FormItem>
                    <FormItem label="" class="form-item no-label">
                        <Row>
                            <Col span="24">
                                <Button class="submit" long @click="handleSubmit('formValidate')">登录</Button>
                            </Col>
                        </Row>
                    </FormItem>
                </Form>
            </div>
        </div>
    </div>
</template>
<script>

const uuid = require('uuid/v1');
import {mapActions} from 'vuex'

export default {
    data () {
        return {
            formData:{
                co_id: '',
                l_n: '',
                l_pw: ''
            },
            formItem:{
                select: '',
                checkbox: [],
                isInline:true
            },
            ruleValidate:{
                co_id:[{required:true,message:'公司ID不能为空',trigger: 'blur'}],
                l_n:[{required:true,message:'客服ID不能为空',trigger: 'blur'}],
                l_pw:[{required:true,message:'登录密码不能为空',trigger: 'blur'}]
            },
            onlineStatusIndex: 1,
            onlineStatus: [false, true, false, false],
            onlineStatusIcon: ["happy-outline", "cube", "leaf", "ios-minus"]
        }
    },
    methods: {
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.login();
                }
            })
        },
        login () {
            console.log('login');
            let o_uuid = uuid();
            console.log('uuid', o_uuid);
            //登录成功后生成uuid，保存到session里面
            this.$store.dispatch('setUuid', o_uuid);
            this.$store.dispatch('startHeartBeat');
            // console.log("uuid",sessionStorage['uuid']);
            this.$router.push({'path':'/index'});

            this.$socket.emit('login', {
                "c_id": "40000",
                "c_t": "0",
                "s_id": "1",
                "is_en": "0",
                "crc": "qweasd",//校验码
                "bd":{
                    "co_id": this.formData.co_id,
                    "l_c": "0",
                    "l_t": "0",
                    "l_s": "0",
                    "l_n": this.formData.l_n,
                    "l_pw": this.formData.l_pw,
                    "el": "",
                    "ph" : ""
                }
            }, res => {
                if(res && res.bd.e_c == "0"){//成功
                    this.$store.dispatch('setToken',res.bd.tk);
                    this.$store.dispatch('getUserInfo');
                    // this.router.push({'path':'/index'});
                }else{
                    this.$Message.fail('系统异常');
                }
            });
        },
        changeStatus (type) {//更改在线状态
            this.onlineStatusIndex = parseInt(type);
            this.onlineStatus = this.onlineStatus.map( (x,idx) => {
                if(idx != this.onlineStatusIndex){
                    x = false
                }
            });
            this.onlineStatus[this.onlineStatusIndex] = true;
            /**
            this.$socket.emit('onlineStatus',{
                "c_id": "80010",
                "c_t": "0",
                "s_id": "10",
                "is_en": "0",
                "w_k": "e12906e0-831e-11e8-a050-e342921b4d56",//唯一id
                "crc": "qweasd",
                "bd":{
                    "tk": "753951466321",
                    "c_s_id": "112233445566",
                    "co_id": "12345678",
                "o_s": type//切换在线状态
                }
            }, res => {
                if(res && res.bd.e_c == "0"){//成功

                }else{
                    this.$Message.fail('系统异常');
                }
            }); */
        },
    }
}
</script>
<style lang="scss" scoped>
.main {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    padding: 0;
    background: url('../../../../static/images/back5802.png') repeat-x;
    .tel400 {
        position: absolute;
        width: 213px;
        height: 39px;
        right: 2px;
        background: url('../../../../static/images/tel.png');
    }

    .logo {
        position: absolute;
        left: 60px;
        top: 40px;
        width: 126px;
        height: 24px;
        background: url('../../../../static/images/logo.png');
    }

    .middle_cen {
        padding: 81px 0 0 0;
        position: relative;
        margin: 0 auto;
        width: 999px;
        height: 350px;
        box-sizing: content-box;
        background: url('../../../../static/images/center2.png') 0 81px no-repeat;

        .input_con {
            position: absolute;
            padding:50px 23px 0 23px;
            top: 115px;
            right: 55px;
            width: 329px;
            height: 290px;
            background: url('../../../../static/images/loginbox.png');
            z-index: 9999;
            .form-item {
                margin-bottom: 17px;
                &.mr-b10 {
                    margin-bottom: 10px;
                }
            }

            .submit {
                background: url('../../../../static/images/loginbtn-bg.png') repeat-x;
                border-color: $c_19;
                color: $c_1;
                line-height: 32px;
                font-size: 18px;
                padding-top: 0;
                padding-bottom: 0;
            }

            .online-status {
                .i-icon {
                    padding: 0 5px;
                }
            }
        }
    }
}
</style>
